<div style="padding-top: 15px; padding-bottom: 15px;">
	<div class="container">
		<a routerLink="/learn" class="btn btn-outline-dark" style="margin-top: 5px;">Back</a>

		<h2>Cameras</h2>
		<p>Cameras define how the scene is viewed in the screen, as every other object they have a position and rotation, and can control where to draw content on the screen and can have postprocessing effects attached.</p>
		<p>A scene can use multiple cameras at the same time, camera have a draw order preference attached to them, used to decide which one to render from first. Cameras can be added from the object add bar.</p>

		<img src="assets/learn/basics/camera/camera.jpg" class="img-big"/>

		<h3>Perspective Camera</h3>
		<p>A perspective camera is used to draw objects with a perspective projection. A perspective projection is a 3D where depth can be easily perceived by the used.</p>
		<p>In perspective cameras the following parameters can be configured:</p>
		<ul>
			<li><p>FOV (Field-of-view): Angle in degrees used to control the camera field of  view.</p></li>
		</ul>

		<h3>Orthographic Camera</h3>
		<p>Orthographic cameras are used to draw object with a orthographic projection. A orthographic proection is a 2D projection where its impossible for the used to perceive distance, objects far away from the camera appear to have the same size as the ones closest to it.</p>
		<p>In orthographic cameras the following parameters can be configured:</p>
		<ul>
			<li><p>Size: Used to control how much the camera can see inside the scene</p></li>
			<li><p>Resize mode: Defines how the camera is resized when the window size changes, if set to horizontal mode, the vertical size of the camera stays the same and the horizontal size changes on resize, if set to vertical mode, the horizontal stays locked and the vertical size changes.</p></li>
		</ul>

		<h3>Comparison</h3>
		<p>In the demo bellow we can see booth a perspective camera (on the left) and a orthographic camera (on the right) in action.</p>

		<app-viewer fname="assets/learn/basics/camera/cameras.nsp"></app-viewer>

		<h3>Viewport</h3>
		<p>The zone on the screen where the camera draws can be controlled using the viewport attributes. This allows for multiple cameras to be displayed at the same time on one screen.</p>
		<ul>
			<li><p>Position: Normalized coordinates used to select where the draw zone starts (bottom left corner). Ranges from 0 to 1.</p></li>
			<li><p>Size: Normalized coordinates used to define the size of the draw zone. Ranges from 0 to 1.</p></li>
		</ul>

		<img src="assets/learn/basics/camera/viewport.png" class="img-big"/>

		<p>In the example bellow the booth cameras have a viewport of (1.0, 0.5) this means that the cameras ocupy 100% of the screen in the horizontal and half the screen in the vertical. And position for the camera on the bottom (0,0), and (0, 0.5) for the top camera. These positions are relative to the bottom left corner of the viewports. The bottom camera start on the bottom left of the screen and the top camera starts at 50% of the vertical size of the screen.</p>

		<app-viewer fname="assets/learn/basics/camera/viewport.nsp"></app-viewer>

		<h3>Cube Camera</h3>
		<p>Cube cameras are composed of 6 internal perspective cameras aligned to capture an entire 360 projection of the scene.</p>
		<p>These type of cameras are useful for material effects that require access to information of the surroundings (e.g reflections, refraction). These can be programmatically attached to the scene (as background) or to materials (as environment map).</p>

		<img src="assets/learn/basics/camera/cubecamera.png" class="img-big"/>
	</div>
</div>
